<template>
  <a-steps progress-dot :current="stepCurrent" class="mutilpe-upload-step">
    <a-step title="上传文件">
      <template #icon> </template>
    </a-step>
    <a-step title="执行导入">
      <template #icon> </template>
    </a-step>
    <a-step title="导入完成">
      <template #icon> </template>
    </a-step>
  </a-steps>
  <Step1 v-if="stepCurrent === 1" @next="changeCurrentStep" />
  <Step2 v-else-if="stepCurrent === 2" />
  <Step3 v-else />
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import Step1 from './Step1.vue';
import Step2 from './Step2.vue';
import Step3 from './Step3.vue';

const stepCurrent = ref(1);

function changeCurrentStep(index: number) {
  stepCurrent.value = index;
}
</script>

<style lang="scss" scoped>
.mutilpe-upload-step {
  margin-bottom: 38px;
  margin-top: 13px;

  :deep(.ant-steps-item) {
    .ant-steps-icon-dot::after {
      width: 32px !important;
      border-radius: 50%;
      color: #999999;
      font-size: 16px;
      box-sizing: border-box;
      background-color: #fff;
      border: 1px solid #d9d9d9;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      top: -14px;
    }
    .ant-steps-item-tail::after {
      width: calc(100% - 50px);
    }
    .ant-steps-item-content {
      width: 122px;
      margin-top: 26px;
      .ant-steps-item-title {
        font-size: 16px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #333333 !important;
        line-height: 22px;
      }
    }

    > .ant-steps-item-container > .ant-steps-item-tail::after {
      background-color: #f0f0f0 !important;
      height: 1px;
    }
    &.ant-steps-item-finish {
      .ant-steps-icon-dot::after {
        background: #1890ff;
        color: #fff;
        border: 0 none;
      }
    }
    &:nth-child(1) {
      .ant-steps-icon-dot::after {
        content: '1';
      }
    }
    &:nth-child(2) {
      .ant-steps-icon-dot::after {
        content: '2';
      }
    }
    &:nth-child(3) {
      .ant-steps-icon-dot::after {
        content: '3';
      }
    }
  }
}
</style>
